<script setup lang="ts">
import slide1 from "@@/assets/images/layouts/1.jpg"
import slide2 from "@@/assets/images/layouts/2.jpg"
import logoUrl from "@@/assets/images/layouts/logo.png"

import thumbnail_3 from "@@/assets/images/layouts/thumbnail_3.png"
import thumbnail_4 from "@@/assets/images/layouts/thumbnail_4.png"
import { removeToken } from "@@/utils/cache/cookies.ts"
import { onBeforeMount, onMounted, ref, shallowReactive } from "vue"
import { articleApi, addOrderApi, wechatPayApi, checkOrderDetailApi } from "@/api"
import { useUserStore } from "@/pinia/stores/user.ts"
import Swiper from "./Swiper.vue"
const wechatQRCode = ref("")
const qrCodeDataUrl = ref("")
const dialogVisible = ref(false)
import QRCode from "qrcode";
import number from "async-validator/dist-types/validator/number";
const userStore = useUserStore()
const rechargeOrderId = ref(0)
const checkTimes = ref(10)
const token = ref("")
const username = ref("")
/** 登录按钮 Loading */
const loading = ref(false)
const list = ref<any[]>([])
const list2 = ref<any[]>([])
const images = ref<any[]>([])
function loadImages() {
  const imgs = [slide1, slide2, slide1, slide2, slide1, slide2]
  for (let i = 1; i <= 6; i++) {
    images.value.push({
      title: `image-${i}`,
      link: `#`,
      src: `${imgs[i - 1]}`
    })
  }
}
const generateQRCode = async () => {
  try {
    const url = wechatQRCode.value;
    if (url &&url.length > 0) {
      qrCodeDataUrl.value = await QRCode.toDataURL(url, {
        width: 200, // 二维码的宽度，单位是像素（px）
        margin: 1 // 二维码周围的空白边距，单位是像素（px）
      });
    }
  } catch (err) {
    console.error(err);
  }
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  loadImages()
  username.value = userStore.getUserName().value
  token.value = userStore.token
})
onMounted(() => {
  // 在组件挂载后执行初始化操作
  // 例如，从API获取数据
  getNewList()
  getNewList1()
  generateQRCode()
  const timer = setInterval(function(){
    console.log('每3秒执行一次');
    if (rechargeOrderId.value) {
      checkOrderDetailApi({id: rechargeOrderId.value}).then( ({ data }) => {
        console.log(data.status)
        if (data.status == 1) {
          clearInterval(timer);
          dialogVisible.value = false
        }
      })
    }
    checkTimes.value = checkTimes.value - 1
    // checkTimes小于0，清除定时器
    if (checkTimes.value <= 0) {
      clearInterval(timer);
      dialogVisible.value = false
    }
    // 请求订单是否完成，如果完成则跳转
  }, 3000);
})
/** 登录 */
function getNewList() {
  const data2 = { page: 1, type: "news", limit: 4 }
  articleApi(data2).then(({ data: tableData, code, msg }) => {
    console.log(tableData[0])
    // list.value = tableData
    for (let i = 0; i < tableData.length; i++) {
      list.value.push({
        id: tableData[i].id,
        title: tableData[i].title,
        description: tableData[i].description,
        content: tableData[i].content,
      })
    }
    console.log(list.value)
  }).catch((data) => {
    console.log(data)
  }).finally(() => {
    loading.value = false
  })
}
function getNewList1() {
  const data2 = { page: 1, type: "hot", limit: 3 }
  articleApi(data2).then(({ data: tableData, code, msg }) => {
    console.log(tableData[0])
    // list.value = tableData
    for (let i = 0; i < tableData.length; i++) {
      list2.value.push({
        title: tableData[i].title,
        description: tableData[i].description,
        content: tableData[i].content
      })
    }
    console.log(list.value)
  }).catch((data) => {
    console.log(data)
  }).finally(() => {
    loading.value = false
  })
}
const navigation = shallowReactive<{ [key: string]: any }>({})
function onBroadcastSwiper(swiper: any) {
  navigation.prevEl = swiper.navigation.prevEl
  navigation.prevEl.style.display = "none"
  navigation.nextEl = swiper.navigation.nextEl
  navigation.nextEl.style.display = "none"
}

function goPay() {
  if(!userStore.getUserId().value) {
    ElMessage.error({
      message: "请登录后再操作！",
      type: "warning",
      duration: 2000
    })
  } else {
    const data_pay = {
      uid: userStore.getUserId().value,
      account: 1900,
      pay_info: "微信"
    }
    addOrderApi(data_pay).then(({ data, code, msg }) => {
      const data_pay2 = {
        id: data,
        pay_type: 2,
        client_type: 3,
        accept_name: "用户",
        single_pay: 1
      }
      rechargeOrderId.value = parseInt(data)
      console.log(data)
      wechatPayApi(data_pay2).then(({ data, code, msg }) => {
        console.log(data.codeUrl)
        if( code === 0) {
          wechatQRCode.value = data.codeUrl
          generateQRCode()
          dialogVisible.value = true
        } else {
          ElMessage.error({
            message: "系统支付请求失败！",
            type: "warning",
            duration: 2000
          })
          dialogVisible.value = true
        }
      })
    })
  }
}
function cancelPay () {
  dialogVisible.value = false
}
// function onPrev() {
//   navigation.prevEl.click()
// }
// function onNext() {
//   navigation.nextEl.click()
// }
</script>

<template>
    <div class="container child-view" style="max-width: 2560px;">
      <div class="title">权益方案</div>
      <div class="desc">挑选更适合您的版本为合规助力</div>
      <div class="vip-list">
        <div class="vip-item">
          <div class="vip-item-top">
            <div class="vip-item-title">体验版权益</div>
            <div class="vip-item-curprice">
              <span>0</span>
              <span>元/年</span>
            </div>
          </div>
          <div class="vip-item-bottom">
            <div>
              <div class="vip-item-bottom-title">权益</div>
              <div class="vip-item-bottom-benefits">
                <span>权益1:</span><span>权益1</span></div>
              <div class="vip-item-bottom-benefits">
                <span>权益2:</span><span>权益2</span>
              </div>
            </div>
          </div>
        </div>
        <div class="vip-item">
          <div class="vip-item-top">
            <div class="vip-item-title" @click="goPay">订阅会员</div>
            <div class="vip-item-curprice">
              <span>1900</span>
              <span>元/年</span>
            </div>
            <div class="vip-item-oldprice">
              <span>1699</span>
              <span>元/年</span>
            </div>
          </div>
          <div class="vip-item-bottom">
            <div class="qidai"> 敬请期待 </div>
          </div>
        </div>
      </div>
    </div>
  <el-dialog  v-model="dialogVisible" title="" :width="550" >
    <template #title>
      <div v-if="qrCodeDataUrl" style="display: flex;flex-direction: column;justify-content: center;">
        <!-- <div class="title">微信支付</div> -->
        <div class="desc" style="height: 80px;line-height: 28px;margin-bottom: 8px;">请使用微信扫码支付</div>
        <div id="qrcode" style="width: 300px;height: 300px;margin: auto;pa">
          <img v-if="qrCodeDataUrl" :src="qrCodeDataUrl" alt="" width="300" height="300"></img>
        </div>
        <div class="desc" style="height:45px; line-height:45px;">
          <el-button size="large" type="primary" @click="cancelPay">取消支付</el-button>
        </div>
        <div class="desc" style="height:30px; line-height:28px;"></div>
      </div>
    </template>
  </el-dialog>
</template>

<style>

html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.container{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.title {
   font-family: xiaomi;
   font-size: 40px;
   color: #000;
   line-height: 53px;
   text-align: center;
   margin-top: 40px;
 }
.desc {
  font-family: xiaomi;
  font-size: 20px;
  color: #000;
  line-height: 27px;
  margin-top: 20px;
  text-align: center;
}
.vip-list {
  display: flex
;
  justify-content: center;
  margin-top: 40px;
}
.vip-item {
  width: 344px;
  margin-right: 48px;
}
.vip-item-top {
  height: 344px;
  background: linear-gradient(135deg, #2DB9FC 0%, #0E6EF6 100%);
  border-radius: 20px;
  overflow: hidden;
}
.vip-item-bottom {
  height: 688px;
  background: #FFFFFF;
  border-radius: 20px;
  margin-top: 30px;
  padding: 30px;
  box-sizing: border-box;
}
.vip-item-top {
  height: 344px;
  background: linear-gradient(135deg, #2DB9FC 0%, #0E6EF6 100%);
  border-radius: 20px;
  overflow: hidden;
}
.vip-item-bottom {
  height: 688px;
  background: #FFFFFF;
  border-radius: 20px;
  margin-top: 30px;
  padding: 30px;
  box-sizing: border-box;
}
.qidai {
  height: 100%;
  padding-top: 300px;
  text-align: center;
  font-family: xiaomi;
  font-size: 20px;
  color: #000;
}
.vip-item-title {
  font-family: xiaomi;
  font-size: 40px;
  color: #0d2b51;
  line-height: 53px;
  text-align: center;
  margin-top: 46px;
}
.vip-item-curprice {
  margin-top: 30px;
  text-align: center;
}
.vip-item-oldprice{
  text-align: center;
}
.vip-item-bottom-benefits {
  margin-top: 15px;
}
</style>
